<template>
    <div class="register">
        <!-- 顶部导航 -->
        <van-nav-bar title="注册" />

        <!-- 页面标题 -->
        <van-divider>欢迎来到node高级第三周周考</van-divider>

        <!-- 注册表单 -->
        <van-form @submit="onSubmit">
            <!-- name 就是 form 的 key -->
            <!-- v-model 一定要配置，否则该表单字段没有值 -->
            <!-- 用户名 -->
            <van-field
                v-model="form.username"
                name="username"
                placeholder="请输入账号"
                :rules="[
                    { required: true, message: '请填写用户名' },
                    {
                        validator: usernameLengthValidator,
                        message: '至少输入五位',
                        trigger: 'onChange',
                    },
                ]"
            />

            <!-- 姓名 -->
            <van-field
                v-model="form.nickname"
                name="nickname"
                placeholder="请输入姓名"
                :rules="[{ required: true, message: '请填写姓名' }]"
            />

            <!-- 邮箱 -->
            <van-field
                v-model="form.email"
                name="email"
                placeholder="请输入邮箱"
                :rules="[
                    { required: true, message: '请填写邮箱' },
                    {
                        validator: emailValidator,
                        message: '邮箱格式不正确',
                        trigger: 'onChange',
                    },
                ]"
            />

            <!-- 密码 -->
            <van-field
                v-model="form.password"
                type="password"
                name="password"
                placeholder="请输入密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />

            <!-- 确认密码 -->
            <van-field
                v-model="form.confirmPassword"
                type="password"
                name="confirmPassword"
                placeholder="请再次输入密码"
                :rules="[
                    { required: true, message: '请再次填写密码' },
                    {
                        validator: confirmPasswordValidator,
                        message: '两次输入的密码不一致',
                        trigger: 'onChange',
                    },
                ]"
            />

            <div style="margin: 16px;">
                <van-button block type="info" size="small" native-type="submit">
                    注册
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                username: '',
                nickname: '',
                email: '',
                password: '',
                confirmPassword: '',
            },
        };
    },
    methods: {
        async onSubmit(values) {
            // console.log('submit', values);
            delete values.confirmPassword;
            const res = await this.$http.post('/register', values);
            // console.log(res);
            if (res.code !== 201) {
                this.$notify({
                    type: 'danger',
                    message: res.message,
                });
                return;
            }
            // 如果注册成功，跳转到登录页面
            this.$router.push('/login');
        },
        // 校验函数返回 true 表示校验通过，false 表示不通过
        usernameLengthValidator(val) {
            return val.length >= 5;
        },
        emailValidator(val) {
            // lstyr@outlook.com
            return /^\w{1,}@[a-zA-Z0-9]{1,}\.com$/.test(val);
        },
        confirmPasswordValidator(val) {
            return this.form.password === val;
        },
    },
};
</script>

<style lang="less" scoped></style>
